import {DefaultLayoutManager, DefaultStyleManager} from '../base/base-managers.js';
import {IntSliderControl} from '../base/control-factory.js';


export class DeviceStyleManager extends DefaultStyleManager {
    constructor(plugin) {
        super(plugin);
        this.constants = this.plugin.constants;
        this.selector = this.plugin.config.SELECTOR;
        this.keepBaseStyles = true;
    }

    getDynamicStyles() {
        const { PREVIEW_CONTAINER, PREVIEW_OUTPUT } = this.constants;

        return `
            <style>
                /* 控件标签样式 */
                .${this.selector} .widget-label {
                    text-align: left;
                    width: 55px;
                }
                /* 预览容器样式 */
                .${this.selector} .${PREVIEW_CONTAINER} {
                    height: 40vh;
                }
                /* 高亮变化样式 */
                .${PREVIEW_OUTPUT} .highlight .changed {
                    background-color: rgba(255, 235, 59, 0.3);
                    transition: background-color 0.3s ease;
                }
            </style>`
    }
}

export class DeviceLayoutManager extends DefaultLayoutManager {
    constructor(plugin) {
        super(plugin);
        this.constants = this.plugin.constants;
        this.intSliderView = new IntSliderControl(this.plugin, "IntSlider");
    }

    initLayout() {
        const defaultDevice = this.constants.CONTROLS_CONFIG.device["default"];
        const defaultSrc = this.constants.CONTROLS_CONFIG.src["default"];
        const defaultAlign = this.constants.CONTROLS_CONFIG.align["default"];
        const defaultTop = this.constants.CONTROLS_CONFIG.posy["default"];
        const deviceContent = this.constants.DEVICE_CONTENT;

        const html_content = `
            <div class="device-transform-wrapper device-base-${defaultDevice}">
                <div class="device-visual-container">
                    <div class="device device-${defaultDevice}">
                        <div class="device-frame">
                            <img alt="Device Image" class="device-screen" loading="lazy" src="${defaultSrc}"
                                onerror="this.src='${defaultSrc}'; this.alt='Default Image'">
                            <div class="device-content text-${defaultAlign}" 
                                style="top: ${defaultTop}% !important;">
                                <strong>${deviceContent}</strong>
                            </div>
                        </div>
                        <div class="device-stripe"></div>
                        <div class="device-header"></div>
                        <div class="device-sensors"></div>
                        <div class="device-btns"></div>
                        <div class="device-power"></div>
                        <div class="device-home"></div>
                    </div>
                </div>
            </div>
        `;
        this.plugin.$container.prepend(html_content);
    }

    updateLayout(reset) {
        const config = this.plugin.getConfig(reset, "update");
        this.plugin._log(`${reset? "重置预览": "更新预览"}，配置信息`, config, "info", this.constants.LOG_PREFIX);

        const $previewWrapper = $(`.${this.plugin.config.SELECTOR} .${this.constants.PREVIEW_WRAPPER_CONTAINER}`);
        const $preview = $previewWrapper.find(`.${this.constants.PREVIEW_CONTAINER}`);
        const $previewFrame = $preview.find(`.${this.constants.PREVIEW_FRAME}`);
        const $previewImage = $preview.find(`.${this.constants.PREVIEW_IMAGE}`);
        const $previewContent = $preview.find(`.${this.constants.PREVIEW_CONTENT}`);

        // 更新设备样式
        $previewWrapper.attr('class', `${this.constants.PREVIEW_WRAPPER_CONTAINER} device-base-${config.device}`);
        $preview.attr('class', `${this.constants.PREVIEW_CONTAINER} device-${config.device}`);

        // 更新内容显示模式
        $previewFrame.toggleClass("device-screen-content-only", config.contentonly);

        // 更新图片
        $previewImage.attr({
            src: config.src,
        });
        $previewImage.css({
            width: this.intSliderView.getSliderValue(config.width, "width"),
            height: this.intSliderView.getSliderValue(config.height, "height")
        })
        config.contentonly === true? $previewImage.hide() : $previewImage.show();

        // 更新内容样式
        $previewContent.css({
            color: config.color,
            background: config.background,
            top: this.intSliderView.getSliderValue(config.posy, "posy"),
            fontSize: this.intSliderView.getSliderValue(config.size, "size"),
            fontWeight: this.intSliderView.getSliderValue(config.weight, "weight"),
            ... this.plugin.parseStyleString(config.style),
        }).attr('class', `${this.constants.PREVIEW_CONTENT} text-${config.align}`);
    }
}